<template>
    <div class="bgHeader">
        <div class="header-left">
            <div class="header-left-1 mar25">
                <el-icon size="28px" color="#fff">
                    <Calendar />
                </el-icon>
                <div class="yearS">{{ Y }}</div>
            </div>
            <div class="header-left-1 mar62">
                <el-icon size="28px" color="#fff">
                    <Clock />
                </el-icon>
                <div class="yearS">{{ H }}</div>
            </div>
        </div>
        <div class="header-center">
            <div class="SwitchButton">
                <el-icon size="42px" color="red">
                    <SwitchButton />
                </el-icon>
            </div>
            <div class="title">阅读数据分级管理系统</div>
            <div class="SwitchButton2">
                <el-icon size="42px" color="red">
                    <SwitchButton />
                </el-icon>
            </div>
        </div>
        <div class="header-right">
            <el-dropdown>
                <span class="el-dropdown-link">
                    全国 今日
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu class="dropdownMenu">
                        <el-dropdown-item>全国 今日</el-dropdown-item>
                        <el-dropdown-item>重庆</el-dropdown-item>
                        <el-dropdown-item>北京</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script setup>
import { Calendar, Clock, SwitchButton, ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue';
let H = ref('2023:12:15')
const Y = ref('2023:12:15')
function countdown() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    // const dayOfWeek = now.getDay();//星期
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();
    H.value = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    Y.value = `${year}:${month < 10 ? '0' + month : month}:${date < 10 ? '0' + date : date}`
}
setInterval(countdown, 1000);
</script>
<style lang="scss">
.mar25 {
    margin-left: 25px;
}

.mar62 {
    margin-left: 62px;
}

.flex1 {
    flex: 1;
}

.bgHeader {
    height: 100%;
    width: 100%;
    background-image: url('@/assets/image/bg11.png');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;


    .header-left {
        width: 459px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        color: #FFFFFF;
        font-size: 22px;

        .header-left-1 {
            padding-top: 13px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;

            .yearS {
                margin-left: 5px;
            }
        }
    }

    .header-center {
        width: 1002px;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .SwitchButton {
            margin-left: 65px;
        }

        .SwitchButton2 {
            margin-right: 65px;
        }

        .title {
            width: 670px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 34px;
            background: linear-gradient(360deg, #87DAFF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 5px;
            font-weight: 700;
            font-family: Source Han Sans, Source Han Sans;
            opacity: 0.9;
        }
    }

    .header-right {
        width: 459px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        color: red;
        padding-right: 60px;
        padding-top: 20px;

        .el-dropdown-link {
            width: 180px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 44px;
            box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.302);
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 3px solid #129BFF;
            line-height: 44px;
            font-size: 24px;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 500;
            color: #129BFF;
        }
    }
}

.dropdownMenu {
    border: none;
    background-color: red !important;
}
</style>